<template>
    <div class="w-filter">
        <div><slot name="search-form" /></div>
        <div class="w-filter__header">
            <span v-if="searchKey">
                <a-input
                    v-model.trim="searchValue"
                    :placeholder="placeholder"
                    allowClear
                    @change="e => handleChange(searchKey, e)"
                    class="mr15"
                ></a-input>
                <a-button type="primary" @click="changeEvent(searchKey, searchValue)">
                    <svg-icon icon-class="search"></svg-icon>
                    搜索
                </a-button>
            </span>
            <!--默认添加按钮组-->
            <slot />
        </div>
    </div>
</template>

<script>
export default {
    name: 'm-filter',
    props: {
        placeholder: {
            type: String,
            default: '搜索任意内容',
        },
        showCollapse: {
            type: Boolean,
            default: true,
        },
        searchKey: {
            type: String,
        },
        params: {
            type: Object,
        },
    },
    data() {
        return {
            searchValue: '',
            filterData: {},
            show: false,
            span: 24,
        }
    },
    methods: {
        changeEvent(key, value) {
            if (!value) {
                value = ''
            }
            this.filterData[key] = value
            console.log('this.filterData', this.filterData)
            // emit
            this.$emit('search', this.filterData)
        },
        handleChange(key, e) {
            if (!e.target.value) {
                this.changeEvent(key, e.target.value)
            }
        },
        handleRadioButtonClick(item, parent, key) {
            //重置按钮状态
            const arr = parent.options
            arr.forEach(i => {
                this.$set(i, 'active', false)
            })
            this.$set(item, 'active', true)
            this.changeEvent(key, item.value)
        },
    },
}
</script>

<style scoped lang="scss">
.ant-btn-icon-only {
    padding: 0 15px;
    font-size: unset;
}
.w-filter {
    background-color: #fff;
    padding: 11px;
    height: 63px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #e4e8ed;
    /*规定所有输入框宽度和大小*/
    /deep/.ant-input-affix-wrapper {
        width: auto;
    }
    /deep/.ant-input,
    .ant-select {
        width: 180px;
    }
    /deep/.ant-btn {
        height: 32px;
        .svg-icon {
            font-size: 18px;
        }
    }
    /*---规定所有输入框宽度和高度*/
    &__header {
        display: inline-block;
    }
    /deep/ .ant-card-body {
        padding-top: 0;
        padding-bottom: 0;

        .ant-form {
            padding: 20px 0;
        }

        .ant-form-item {
        }
        .ant-form-item-label {
            width: 120px;
            float: left;
        }
        .ant-form-item-control-wrapper {
            width: calc(100% - 120px);
            float: left;
        }
        .ant-calendar-picker {
            width: 100%;
            max-width: 300px;
        }
    }
}

.search-filter {
    padding-bottom: 20px;
    .search-filter-button {
        font-size: 12px;
        cursor: pointer;
        color: #409eff;
        line-height: 28px;
    }
}
.search-filter-expand {
    /deep/.ant-cascader-picker {
        width: auto;
    }
}
</style>
